<head>
    <script src="../build/index.js"></script>
    <script src="../build/plugin.webgl.js"></script>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        /*opacity: 0.3;*/
    }
    .fps {
        position: absolute;
        font-size: 30px;
        top: 0;
        right: 100px;
        z-index: 2;
        background-color: white;
        color: red;
    }
</style>

<body>
    <canvas id="app"></canvas>
    <div class="fps"></div>

    <script>
        var $app = new Easycanvas.Painter({
            el: '#app',
            fullScreen: true,
            webgl: {
                // camera: {
                //     enable: true,
                //     current: {
                //         x: 0,
                //         y: 0,
                //         z: -1000,
                //     },
                //     target: {
                //         x: 0,
                //         y: 0,
                //         z: 0,
                //     },
                //     rotate: {
                //         x: 0,
                //         y: -1,
                //         z: 0,
                //     },
                // },
            },
        });

        var $fpsBox = document.getElementsByClassName('fps')[0];
        $app.fpsHandler = function (fps) {
            if ($app.$perf && $app.$perf.preprocessTimeSpend) {
                $fpsBox.innerText = fps + 'fps,' + $app.$perf.preprocessTimeSpend + ',' + $app.$perf.paintTimeSpend;
            } else {
                $fpsBox.innerText = fps;
            }
        };

        // $app.add({
        //     style: {
        //         left: 0, top: 0,
        //     },
        //     webgl: window.Easycanvas.webglShapes.ball({
        //         r: 250, b: 20,
        //         // colors: [255, 0, 0, 255, 255, 0, 0, 255, 0]
        //         colors: [255, 0, 0]
        //     }),
        // });

        // 2500 40fps => 47 ==code style==> 50
        for (var i = 0; i < 1; i++) {
            $app.add({
                style: {
                    left: Math.random() * 1000 - 500,
                    top: Math.random() * 1000 - 500,
                },
                webgl: window.Easycanvas.webglShapes.block({
                    tz: Math.random() * 1000 - 500,
                    a: 200, b: 100, c: 50,
                    colors: [
                        Math.random() * 255,
                        Math.random() * 255,
                        Math.random() * 255,
                        // Math.random() * 255,
                    ],
                }),
            });
        }

        // $app.add({
        //     style: {
        //         left: 0,
        //         top: 0,
        //     },
        //     webgl: window.Easycanvas.webglShapes.block({
        //         // tz: 0,
        //         a: 1000, b: 1000, c: 1000,
        //         colors: [
        //             200,0,0
        //         ],
        //     }),
        // });

        var interval = 2000;
        var current = $app.webgl.camera.current;

        // function changeCamera () {
        //     Easycanvas.Transition(current, 'x', 'ease', Math.random() * 1000 - 500, interval);
        //     Easycanvas.Transition(current, 'y', 'ease', Math.random() * 1000 - 500, interval);
        //     Easycanvas.Transition(current, 'z', 'linear', -1000 - Math.random() * 500, interval);
        // }

        // changeCamera();
        // setInterval(changeCamera, interval);

        $app.start();
    </script>
</body>

